<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <p v-color v-if="flag">{{msg}}</p>
        <button @click="flag=!flag">修改flag</button>
    </div>
</body>

</html>
<script>
    // 自定义指令
    // 分为2类 : 
    // 第一类: 全局自定义指令
    // 全局指令可以在全局的任意位置使用
    // 第二类: 局部自定义指令
    // 局部变量只能在当前定义该指令的组件中使用

    // 全局指令
    // 语法: app.directive(指令名,配置对象)


    const app = Vue.createApp({
        data() {
            return {
                msg: '自定义指令',
                flag: true
            }
        },
        methods: {

        }
    })


    // 全局指令
    // 使用的时候 v-color
    app.directive('color', {
        created(el, binding, vnode, prevVnode) {
            //console.log('created', el, binding, vnode, prevVnode);
            // 指令创建完毕的生命周期
            console.log('created');
        },

        beforeMount(el, binding, vnode, prevVnode) {
            //console.log('beforeMount', el, binding, vnode, prevVnode);
            //挂载前的生命周期. 此时,绑定该指令的节点还没有挂载到父节点上去,所以获取不到父节点 
            // console.log(el.parentNode); // 获取不到父节点
            console.log('beforeMount');
        },
        mounted(el, binding, vnode, prevVnode) {
            // 挂载后的生命周期, 此时当前的绑定该指令的节点已经挂载到了父节点的dom 上
            //console.log('mounted', el, binding, vnode, prevVnode);
            // console.log(el.parentNode); 
            console.log('mounted');
        },
        beforeUpdate(el, binding, vnode, prevVnode) {
            //绑定元素的父组件更新前调用
            console.log('beforeUpdate');
            // console.log(el, binding, vnode, prevVnode);
        },
        updated(el, binding, vnode, prevVnode) {
            // 当绑定指令的元素上的响应数据更新后触发
            console.log('updated');
        },
        // 绑定元素的父组件卸载前调用
        beforeUnmount(el, binding, vnode, prevVnode) {
            // 表示当前的绑定该指令的元素节点不在渲染, 
            console.log('beforeUnmount');

        },
        // 绑定元素的父组件卸载后调用
        unmounted(el, binding, vnode, prevVnode) {
            console.log('unmounted');
        }
    })

    app.mount('#app')

</script>